﻿@inject FwProject.Shop.Views.WebRootUrl WebRootUrl
@using FwProject.Shop.Dto
@using FwProject.ShoppingMall.Shop
@model ShopProductEditDto
@section styles{
    <link href="~/static/css/Ztree.css" type="text/css" rel="stylesheet" />
    <link href="~/static/css/metroStyle.css" type="text/css" rel="stylesheet" />
    <link href="~/static/css/public.css" type="text/css" rel="stylesheet" />
    <link href="~/static/css/client.css" type="text/css" rel="stylesheet" />
    <link href="~/Content/bootstrap-tagsinput.css" rel="stylesheet" />
}
<style>
    a {
        text-decoration: none;
    }

    .layui-index {
        padding: 15px;
    }

    .layui-field-title {
        margin-top: 50px;
    }

    .bootstrap-tagsinput {
        border: 0;
        line-height: 2;
    }

        .bootstrap-tagsinput .tag {
            background-color: #1E9FFF;
            border-radius: 3px;
            padding: 5px;
        }

    ul {
        overflow: hidden;
    }

    .spec li {
        list-style: none;
        float: left;
        width: 20%;
        text-align: left;
    }

        .spec li tr th {
        }

    .spec-form-table {
        width: 100%;
    }

        .spec-form-table th {
            width: 80px;
            text-align: center;
            vertical-align: middle;
        }

    .ipt {
        width: 80%;
    }

    element.style {
        border: none;
    }

    .layui-table th, td {
        text-align: center;
    }

    .spec span img {
        border: 1px solid #D8D8D8;
        height: 20px;
        margin: 3px 0;
        padding: 1px;
        width: 20px;
    }

    .spec li span {
        display: inline;
        float: left;
        height: 24px;
        line-height: 24px;
        margin-right: 6px;
    }

    .layui-table tr td {
        text-align: center;
        padding: 9px 15px !important
    }

    .image-update-box .item {
        float: left;
        position: relative;
        width: 60px;
        margin: 5px;
        height: 60px;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 60px;
        cursor: pointer;
        overflow: hidden;
    }

        .image-update-box .item input {
            display: none;
        }

    .layui-upload-img {
        width: 100%;
        height: auto;
    }

    .upload-img {
        position: relative;
        width: 100px;
        float: left;
        margin: 5px;
    }

        .upload-img .toolbar {
            position: absolute;
            bottom: 5px;
            left: 0;
            right: 0;
            width: 100%;
            background-color: #000;
            opacity: .3;
            z-index: 108;
        }

            .upload-img .toolbar i {
                cursor: pointer;
            }
</style>
<div class="layui-index">
    <form class="layui-form layui-form-pane" action="@Url.Action("Edit",new { id= ViewBag.Id})" method="post" data-ajax-begin="LockAjaxCallbackBack" novalidate="novalidate" data-ajax="true" data-ajax-success="ReloadAjaxCallbackgoback" data-ajax-failure="FailureAjaxCallback" data-ajax-method="Post" role="form" lay-filter="form1">
        @Html.AntiForgeryToken()
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>基本信息</legend>
        </fieldset>
        <div class="layui-form-item">
            @Html.LabelFor(o => o.ShopTypeid, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                <input type="text" name="TypeNames" autocomplete="off" value="@ViewBag.TypeName" disabled class="layui-input">
                @Html.HiddenFor(o => o.ShopTypeid)
            </div>
        </div>
        <div class="layui-form-item">
            @Html.LabelFor(o => o.ProductName, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                @Html.TextBoxFor(o => o.ProductName, new { @class = "layui-input", @placeholder = "请输入商品名称", @lay_verify = "required" })
                @Html.ValidationMessageFor(o => o.ProductName)
            </div>
        </div>
        <div class="layui-form-item layui-upload">
            @Html.LabelFor(o => o.ImagePic, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal" id="up_btn3" data-src="#imagePic" style="float:left;">选择图片</button>
                <img class="layui-upload-img" id="imagePic" style="float:left; padding-left:10px; max-width:100px;height:auto;" src="@(WebRootUrl.WebImageRootUrl()+Model.ImagePic)">
                @Html.HiddenFor(o => o.ImagePic, new { @lay_verify = "required" })
                @Html.ValidationMessageFor(o => o.ImagePic)
            </div>
        </div>
        <div class="layui-form-item">
            @Html.LabelFor(o => o.ShopSupplierid, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                @Html.DropDownListFor(o => o.ShopSupplierid, ViewBag.Suppliers as IEnumerable<SelectListItem>)
                @Html.ValidationMessageFor(o => o.ShopSupplierid)
            </div>
        </div>
        <div class="layui-form-item">
            @Html.LabelFor(o => o.ShopProductFlag, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                <enums asp-name="ShopProductFlag" asp-valuetype="2" asp-enum="typeof(ShopProductFlag)" asp-value="@Model.ShopProductFlag.ToString()"></enums>
                @Html.ValidationMessageFor(o => o.ShopProductFlag)
            </div>
        </div>
        <div class="layui-form-item">
            @Html.LabelFor(o => o.ProductNumber, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                @Html.TextBoxFor(o => o.ProductNumber, new { @class = "layui-input", @placeholder = "请输入商品编号", @lay_verify = "required" })
                @Html.ValidationMessageFor(o => o.ProductNumber)
            </div>
        </div>
        <div class="layui-form-item">
            @Html.LabelFor(o => o.IsGrounding, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                <input type="radio" name="IsGrounding" value="true" title="是" @(Model.IsGrounding ? "checked" : "")>
                <input type="radio" name="IsGrounding" value="false" title="否" @(Model.IsGrounding ? "" : "checked")>
            </div>
        </div>
        <div class="layui-form-item">
            @Html.LabelFor(o => o.MarketPrice, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                @Html.TextBoxFor(o => o.MarketPrice, new { @class = "layui-input", @placeholder = "请输入市场价格", @number = "number", @step = "0.01", @lay_verify = "required" })
                @Html.ValidationMessageFor(o => o.MarketPrice)
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            @Html.LabelFor(o => o.ProductDetails, new { @class = "layui-form-label" })
            <div class="layui-input-block">
                <script id="ProductDetails" name="ProductDetails" type="text/plain" style="height:300px">
                    @Html.Raw(Model.ProductDetails)
                </script>
                @*<textarea placeholder="请输入内容" class="layui-textarea"></textarea>*@
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title">
            <legend>相册</legend>
        </fieldset>
        <div class="layui-form-item  layui-form-text">
            <label class="layui-form-label">宣传图</label>
            <div class="layui-input-block">
                <blockquote class="layui-elem-quote layui-quote-nm">
                    <div class="layui-upload-list" id="preview1" style="overflow:hidden;">
                        @foreach (var item in Model.PicImages)
                        {
                            <div class="upload-img">
                                <img src="@(WebRootUrl.WebImageRootUrl()+item.Path)" alt="@item.FileName" class="layui-upload-img">
                                <div class="toolbar">
                                    <input type="hidden" name="PropagandaImgs" value="@item.FileName" />
                                    <i class="layui-icon layui-icon-delete" style="font-size: 20px; color: #fff;" onclick="deleteImg(this)"></i>
                                </div>
                            </div>
                        }
                    </div>
                </blockquote>
                <div class="layui-upload-drag" id="up_btn1">
                    <i class="layui-icon"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                </div>
            </div>
        </div>
        <div class="layui-form-item  layui-form-text">
            <label class="layui-form-label">详情图</label>
            <div class="layui-input-block">
                <blockquote class="layui-elem-quote layui-quote-nm">
                    <div class="layui-upload-list" id="preview2" style="overflow:hidden;">
                        @foreach (var item in Model.DetailsImages)
                        {
                            <div class="upload-img">
                                <img src="@(WebRootUrl.WebImageRootUrl()+item.Path)" alt="@item.FileName" class="layui-upload-img">
                                <div class="toolbar">
                                    <input type="hidden" name="DetailsImgs" value="@item.FileName" />
                                    <i class="layui-icon layui-icon-delete" style="font-size: 20px; color: #fff;" onclick="deleteImg(this)"></i>
                                </div>
                            </div>
                        }
                    </div>
                </blockquote>
                <div class="layui-upload-drag" id="up_btn2">
                    <i class="layui-icon"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                </div>
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title">
            <legend>规格</legend>
        </fieldset>
        <div class="layui-form-item">
            @Html.LabelFor(o => o.SpcemarketPrice, new { @class = "layui-form-label" })
            <div class="layui-input-inline">
                @Html.TextBoxFor(o => o.SpcemarketPrice, new { @class = "layui-input", @placeholder = "请输入销售价", @lay_verify = "required" })
                @Html.ValidationMessageFor(o => o.SpcemarketPrice)
            </div>
        </div>
        <div class="layui-form-item">
            @Html.LabelFor(o => o.SpcecostPrice, new { @class = "layui-form-label" })
            <div class="layui-input-inline">
                @Html.TextBoxFor(o => o.SpcecostPrice, new { @class = "layui-input", @placeholder = "请输入成本价", @lay_verify = "required" })
                @Html.ValidationMessageFor(o => o.SpcecostPrice)
            </div>
        </div>
        <div class="layui-form-item">
            @Html.LabelFor(o => o.SpceWeight, new { @class = "layui-form-label" })
            <div class="layui-input-inline">
                @Html.TextBoxFor(o => o.SpceWeight, new { @class = "layui-input", @placeholder = "请输入重量", @lay_verify = "required" })
                @Html.ValidationMessageFor(o => o.SpceWeight)
            </div>
            <span class="layui-form-mid layui-word-aux">克(g)</span>
        </div>

        @if (Model.ProductType.IsSpec)
        {
            <div class="layui-form-item">
                <label class="layui-form-label">规格</label>
                <div class="layui-input-inline">
                    @if (Model.SpceIsActive)
                    {
                        <button class="layui-btn layui-btn-danger" type="button" id="openAndshut">关闭规格</button>
                        <input type="hidden" name="SpceIsActive" id="SpceIsActive" value="true" />
                    }
                    else
                    {
                        <button class="layui-btn" type="button" id="openAndshut">开启规格</button>
                        <input type="hidden" name="SpceIsActive" id="SpceIsActive" value="false" />
                    }
                </div>
            </div>
            <div id="spec-input" style="text-align: left; display:@(Model.SpceIsActive ? "block" : "none") ;">
                <table class="form-table spec-form-table">
                    <tbody>
                        @if (Model.ProductType.Spces.Count > 0)
                        {
                            var originalspce = Model.ShopProductSpceValues.Select(o => o.SpaceValueid);
                            var j = 0;
                            for (int i = 0; i < Model.ProductType.Spces.Count; i++)
                            {
                                if (Model.ProductType.Spces[i].SpceType == FwProject.ShoppingMall.Com.SpceTypeEnum.文字)
                                {
                                    <tr>
                                        <th>@(Model.ProductType.Spces[i].SpceName)：</th>
                                        <td>
                                            <ul class="spec" specname="@(Model.ProductType.Spces[i].SpceName)" spectype="@Model.ProductType.Spces[i].SpceType">
                                                @foreach (var item in Model.ProductType.Spces[i].SpceValues)
                                                {
                                                    <li style="margin: 5px;" change-spec-index="@j++">
                                                        <span>
                                                            <input type="checkbox" class="chk" lay-skin="primary" @(originalspce.Contains(item.Id) ? "checked" : "") specmemo="@Model.ProductType.Spces[i].SpceNote" specid="@Model.ProductType.Spces[i].Id" spec_value="@item.Spcevalue" lay-filter="spce-che" value="@item.Id" title="@item.Spcevalue" />
                                                        </span>
                                                        <span>
                                                            <input style="display:none;" type="text" class="change-spec-value ipt" value="@item.Spcevalue">
                                                        </span>
                                                    </li>
                                                }
                                            </ul>
                                        </td>
                                    </tr>
                                }
                                else
                                {
                                    <tr>
                                        <th>@(Model.ProductType.Spces[i].SpceName)：</th>
                                        <td>
                                            <ul class="spec" specname="@(Model.ProductType.Spces[i].SpceName)" spectype="@Model.ProductType.Spces[i].SpceType">
                                                @foreach (var item in Model.ProductType.Spces[i].SpceValues)
                                                {
                                                    <li style="margin: 5px;" change-spec-index="@j++">
                                                        <span>
                                                            <input type="checkbox" class="chk" lay-skin="primary" @(originalspce.Contains(item.Id) ? "checked" : "") specmemo="@Model.ProductType.Spces[i].SpceNote" specid="@Model.ProductType.Spces[i].Id" spec_value="@item.Spcevalue" lay-filter="spce-che" value="@item.Id" />
                                                        </span>
                                                        <span><img alt="@item.Spcevalue" src="@(WebRootUrl.WebImageRootUrl() + item.Spcevalueico)"></span>
                                                        <span>
                                                            <input style="border:none;" type="text" class="change-spec-value" value="@item.Spcevalue" readonly>
                                                        </span>
                                                    </li>
                                                }
                                            </ul>
                                        </td>
                                    </tr>
                                }
                            }
                        }
                    </tbody>
                </table>
                <div class="detail" id="spectext">
                    <table class="layui-table spec_table" lay-size="sm" style="width:80%;">
                        <colgroup>
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                        </colgroup>
                        <thead>
                            <tr>
                                @foreach (var item in Model.ShopProductSpces)
                                {
                                    var s = Model.ProductType.Spces.Where(o => o.Id == item.Spaceid).FirstOrDefault();
                                    if (s != null)
                                    {
                                        <th>@s.SpceName</th>
                                    }
                                }
                                <th>销售价</th>
                                <th>重量</th>
                                <th>成本价</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model.ShopProductSkus)
                            {

                                <tr>
                                    @if (item.SpaceValues.Count > 0)
                                    {
                                        for (int i = 0; i < item.SpaceValues.Count; i++)
                                        {
                                            <td><input type="text" name="specvalue_@i" value="@item.SpaceValues[i].Spcevalue" readonly class="layui-input" /></td>
                                        }
                                    }
                                    <td>
                                        <input type="hidden" name="productids" value="@item.Id" class="ipt" prop='productid' propid="@(item.SpaceValueid.Replace("|", "_"))">
                                        <input type="hidden" value="@item.SpaceValueid" name="specvids">
                                        <input type="hidden" value="" name="specids">
                                        <input class="ipt price layui-input" propid="@(item.SpaceValueid.Replace("|", "_"))" prop="price" size="8" value="@item.SpceMarketPrice" type="text" name="prices" />
                                    </td>
                                    <td>
                                        <input type="text" size="10" name="weights" value="@item.SpceWeight" autocomplete="off" class="ipt layui-input" propid="@(item.SpaceValueid.Replace("|", "_"))" prop="weight">
                                    </td>
                                    <td>
                                        <input type="text" size="8" name="costs" value="@item.SpceCostPrice" autocomplete="off" class="ipt layui-input" propid="@(item.SpaceValueid.Replace("|", "_"))" prop="cost">
                                    </td>
                                    <td><a class="layui-btn layui-btn-danger layui-btn-small del" href="javascript:">删除</a></td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
                <blockquote class="layui-elem-quote layui-quote-nm" id="specimg" style="overflow:hidden;">
                    <div class="layui-upload-list image-update-box" id="preview1"></div>
                </blockquote>
                <input type="hidden" value="0" name="foreachItem" id="foreachItem">
            </div>
        }

        <fieldset class="layui-elem-field layui-field-title">
            <legend>属性</legend>
        </fieldset>
        <div class="layui-form-item">
            @Html.LabelFor(o => o.Unit, new { @class = "layui-form-label" })
            <div class="layui-input-inline">
                @Html.TextBoxFor(o => o.Unit, new { @class = "layui-input", @placeholder = "请输入计价单位" })
                @Html.ValidationMessageFor(o => o.Unit)
            </div>
        </div>
        @if (Model.ProductType.Isbrand)
        {
            <div class="layui-form-item">
                <label class="layui-form-label">品牌</label>
                <div class="layui-input-inline">
                    <select name="ShopBrandId">
                        <option value=""></option>
                        @foreach (var item in Model.ProductType.Brands)
                        {
                            if (item.BrandId == Model.Brandid)
                            {
                                <option selected value="@item.BrandId">@item.BrandName </option>
                            }
                            else
                            {
                                <option value="@item.BrandId">@item.BrandName </option>
                            }

                        }
                    </select>
                </div>
            </div>
        }
        @if (Model.ProductType.Isflagattr)
        {
            if (Model.ProductType.Attrs.Count() > 0)
            {
                for (int i = 0; i < Model.ProductType.Attrs.Count(); i++)
                {
                    var sele = Model.ProductType.Attrs[i].Attrvalue.Split(',');
                    <div class="layui-form-item">
                        <label class="layui-form-label">@Model.ProductType.Attrs[i].AttrName</label>
                        <div class="layui-input-inline">
                            @{
                                var attr = Model.ShopProductAttrs.Where(o => o.AttrKey == Model.ProductType.Attrs[i].AttrName).FirstOrDefault();
                            }
                            <input type="hidden" name="Attrs[@i].Id" value="@attr.Id" />
                            <select name="Attrs[@i].Attrvalue">

                                <option value=""></option>
                                @foreach (var j in sele)
                                {
                                    if (attr.AttrValue == j)
                                    {
                                        <option selected value="@j"> @j </option>
                                    }
                                    else
                                    {
                                        <option value="@j"> @j </option>
                                    }
                                }
                            </select>
                            <input type="hidden" name="Attrs[@i].Attrkey" value="@Model.ProductType.Attrs[i].AttrName" />
                        </div>
                        <span class="layui-form-mid layui-word-aux">@(string.IsNullOrEmpty(Model.ProductType.Attrs[i].Unit) ? "/" : Model.ProductType.Attrs[i].Unit)</span>
                    </div>

                }
            }
        }

        @if (Model.ProductType.Ispro)
        {
            <fieldset class="layui-elem-field layui-field-title">
                <legend>参数</legend>
            </fieldset>
            if (Model.ProductType.Pars.Count > 0)
            {
                for (int i = 0; i < Model.ProductType.Pars.Count; i++)
                {

                    <fieldset class="layui-elem-field">
                        <legend>@Model.ProductType.Pars[i].GroupName</legend>
                        <div class="layui-field-box">
                            @if (Model.ProductType.Pars[i].ParValus.Count > 0)
                            {
                                for (int j = 0; j < Model.ProductType.Pars[i].ParValus.Count; j++)
                                {
                                    var par = Model.ShopProductPars.Where(o => o.ParKey == Model.ProductType.Pars[i].ParValus[j]).FirstOrDefault();

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">@Model.ProductType.Pars[i].ParValus[j]</label>
                                        <div class="layui-input-inline">
                                            <input type="hidden" name="ParsGroups[@i].ParsValues[@j].Id" value="@(par!=null?par.Id.ToString():"")" />
                                            <input type="hidden" name="ParsGroups[@i].ParsValues[@j].ParsKey" value="@Model.ProductType.Pars[i].ParValus[j]" />
                                            <input type="text" name="ParsGroups[@i].ParsValues[@j].ParsValue" class="layui-input" value="@(par!=null?par.ParValue:"")" />
                                        </div>
                                    </div>
                                }
                            }
                        </div>
                    </fieldset>
                }

            }

        }
        <fieldset class="layui-elem-field layui-field-title">
            <legend>标签</legend>
        </fieldset>
        <div class="layui-form-item" style="height: 120px;">
            <label class="layui-form-label">标签</label>
            <div class="layui-input-inline">
                <select lay-filter="tags">
                    <option value=""></option>
                    @foreach (var item in Model.ShopTags)
                    {
                        <option value="@item.Id">@item.TagName </option>
                    }
                </select>
            </div>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="Tags" id="Tags" value="" />
            </div>
        </div>

        <div class="layui-form-item">
            <button class="layui-btn" lay-submit="" lay-filter="demo2">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>
@section scripts{
    <script src="~/Theme/js/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/bootstrap-tagsinput.js"></script>

    <script type="text/javascript" charset="utf-8" src="~/lib/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="~/lib/ueditor/ueditor.all.min.js"></script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="~/lib/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script src="~/js/sku.js"></script>
    <script src="~/js/main.js"></script>
    <script type="text/javascript">
        var ue = UE.getEditor('ProductDetails');
        layui.use(['form', 'layedit', 'laydate', 'table', 'layer', 'element', 'upload'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate
                , table = layui.table
                , upload = layui.upload;


            //自定义验证规则
            form.verify({
                required: function (value) {
                    if (value == "") {
                        return '必填项不能为空';
                    }
                }
            });

            //宣传图
            upload.render({
                elem: '#up_btn1'
                , url: '/Commodity/UpLoadPropagandaImg'
                , multiple: true//开启多文件上传
                , auto: false//关闭自动上传
                , choose: function (obj) {
                    var flag = true;
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        var img = new Image();
                        img.src = result;
                        img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                            if (img.width * 2 == img.height * 3) {
                                obj.upload(index, file); //满足条件调用上传方法
                            } else {
                                flag = false;
                                layer.msg("保存失败：您上传的小图大小必须是3：2尺寸！");
                                return false;
                            }
                        }
                        return flag;

                        //$('#imagePic').attr('src', result)
                        //$('#preview2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                    });
                }
                , done: function (res) {
                    if (res.success) {
                        var path = "@WebRootUrl.WebImageRootUrl()/uploads/temp/commodity/propaganda/";
                        var img = '<div class="upload-img"><img src="' + path + res.result + '" alt="' + res.result + '" class="layui-upload-img"><div class="toolbar"><input type="hidden" name="PropagandaImgs" value="' + res.result + '"/><i class="layui-icon layui-icon-delete" style="font-size: 20px; color: #fff;"  onclick="deleteImg(this)"></i> </div></div>'
                        $('#preview1').append(img);
                    }
                }
            });
            //详情图
            upload.render({
                elem: '#up_btn2'
                , url: '/Commodity/UpLoadDetailsImg'
                , multiple: true//开启多文件上传
                , auto: false//关闭自动上传
                , choose: function (obj) {
                    var flag = true;
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        var img = new Image();
                        img.src = result;
                        img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                            if (img.width % 750 == 0) {
                                obj.upload(index, file); //满足条件调用上传方法
                            } else {
                                flag = false;
                                layer.msg("保存失败：您上传的小图大小必须是750的倍数！");
                                return false;
                            }
                        }
                        return flag;

                        //$('#imagePic').attr('src', result)
                        //$('#preview2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                    });
                }
                  , done: function (res) {
                    //上传完毕
                    if (res.success) {
                        var path = "@WebRootUrl.WebImageRootUrl()/uploads/temp/commodity/details/";
                        var img = '<div class="upload-img"><img src="' + path + res.result + '" alt="' + res.result + '" class="layui-upload-img"><div class="toolbar"><input type="hidden" name="DetailsImgs" value="' + res.result + '"/><i class="layui-icon layui-icon-delete" style="font-size: 20px; color: #fff;"  onclick="deleteImg(this)"></i> </div></div>'
                        $('#preview2').append(img);
                    }
                }
            });

            upload.render({
                elem: '#up_btn3'
                , url: '/Commodity/UpLoadImg'
                , multiple: false//多文件上传
                , auto: false//自动上传
                , choose: function (obj) {
                    var flag = true;
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        var img = new Image();
                        img.src = result;
                        img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                            if (img.width == img.height) {
                                obj.upload(index, file); //满足条件调用上传方法
                                $('#imagePic').attr('src', result)
                            } else {
                                flag = false;
                                layer.msg("保存失败：您上传的小图大小必须是1：1尺寸！");
                                return false;
                            }
                        }
                        return flag;


                        //$('#preview2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                    });
                }
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        //$('#imagePic').attr('src', result)
                        //$('#preview2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                    });
                }
                , done: function (res) {
                    $('#ImagePic').val(res.result)
                    //上传完毕
                }
            });

            form.on('select(tags)', function (data) {
                var id = data.value;
                var text = $(data.elem).find("option:selected").text();
                if (id != "")
                    $('#Tags').tagsinput('add', { id: id, name: text });
            });

            form.on('checkbox(spce-che)', function (data) {
                var $this = $(data.elem);
                var _li = $this.closest('li');
                var change = _li.find(".change-spec-value")
                var _readOnly = change[0].readOnly;
                change[0].readOnly = !_readOnly;
                _readOnly ? change.addClass('ipt') : change.removeClass('ipt');
                SpecOper.createSpecImg($this);
                SpecOper.createSpec();
            })

            function LayerOpen(title, url) {
                var open = layer.open({
                    type: 2,
                    title: title,
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['600px', '450px'],
                    content: url,
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index)//确定两个页面的父子关系
                    },
                    end: function () {
                        //销毁后重新加载
                        table.reload('table1', {
                        })
                    }
                });
            }
        });

        $(document).ready(function () {
            $('#Tags').tagsinput({
                confirmKeys: [13, 44],
                trimValue: true,
                itemValue: function (item) {
                    return item.id;
                },
                itemText: function (item) {
                    return item.name;
                }
            });
            SpecOper.init({
                specUl: $("#spec-input .spec")
            });
               @if (Model.ShopProductTags != null) {
                   foreach (var tag in Model.ShopProductTags)
                   {
                       var z = Model.ShopTags.Where(o => o.Id == tag.Tagid).FirstOrDefault();
                       if (z!=null)
                       {
                            <text>
                                $('#Tags').tagsinput('add', {id:'@(z.Id)',name:"@(z.TagName)"});
                            </text>
                    }
                }
            }


            $("#preview1").sortable({
                revert: true
            });
            $("#preview2").sortable({
                   revert: true
            });
            $(".upload-img").disableSelection();

        });

        $("#openAndshut").on("click", function () {
            var tex = $(this).text();
            if (tex == "开启规格") {
                $(this).text("关闭规格");
                $(this).addClass('layui-btn-danger');
                $('#SpceIsActive').val("true");
                $('#spec-input').show();

            } else if (tex == "关闭规格") {
                $(this).text("开启规格");
                $(this).removeClass('layui-btn-danger');
                $('#SpceIsActive').val("false");
                $('#spec-input').hide();
            }
        });

        function ReloadAjaxCallbackgoback(data, successInfo) {
            if (data.success) {
                layer.msg('保存成功！', { time: 2000, end: function () { top.CloseTab(10087) } })
            } else {
                layer.msg('保存失败：' + successInfo);
            }
        }

        function LockAjaxCallbackBack() {
            if (!ue.hasContents()) {
                layer.msg('详情描述不能为空', { time: 2000 });
                return false;
            }
        }
        function deleteImg(obj) {
            $(obj).parent().parent().remove();
        }

        $("#layui-Area").click(function () {
            $(".layui-Area .layui-Area-hide").toggleClass("layui-Area-show");
            $(this).parent(".layui-form-select").toggleClass("layui-form-selected");
        });

        $(".layui-Area").mouseleave(function () {
            $(".layui-Area .layui-Area-hide").removeClass("layui-Area-show");
        })

    </script>
}
